<template>
	<!-- 我的-入驻服务-骑手入驻 -->
	<view class="RiderServices public">
		<template v-if="is_deliveryman == 0">
			<view class="main">
				<view class="mian-item">
					<view class="notes">
						姓名
					</view>
					<view class="inputBox">
						<view class="inputBox-icon">
							<input type="text" placeholder="请输入骑手姓名" v-model="name" @blur="getname">
							<!-- <text :class="regular.name == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.name}}</text> -->
							<uni-icons :type="regular.name"></uni-icons>
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						电子邮箱
					</view>
					<view class="inputBox">
						<view class="inputBox-icon">
							<input type="email" placeholder="请输入您的邮箱" v-model="mailbox" @blur="getmailbox">
							<!-- <text :class="regular.mailbox == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.mailbox}}</text> -->
							<uni-icons :type="regular.mailbox"></uni-icons>
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						手机号
					</view>
					<view class="inputBox">
						<view class="inputBox-icon">
							<input type="number" placeholder="请输入手机号" maxlength="11" v-model="phone" @blur="getphone">
							<!-- <text :class="regular.phone == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.phone}}</text> -->
							<uni-icons :type="regular.phone"></uni-icons>
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						验证码
					</view>
					<view class="inputBox">
						<input type="text" placeholder="输入验证码" v-model="code">
						<!-- <text ref="obtainCodeDom" class="code" @click="obtainCode">获取验证码</text> -->
						<button class="obtainCodes" @click="eventObtainCode" :disabled="isObtainCode">{{isObtainCode ? '重新获取' + obtainCodes + 's' : '获取验证码'}}</button>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						身份证
					</view>
					<view class="inputBox">
						<view class="inputBox-icon">
							<input type="idcard" placeholder="请输入身份证号码" :maxlength="15 && 18" v-model="IDCard" @blur="getIDCard">
							<!-- <text :class="regular.IDCard == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.IDCard}}</text> -->
							<uni-icons :type="regular.IDCard"></uni-icons>
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						配送区域
					</view>
					<view class="inputBox">
						<view class="">
							<picker mode="selector" :range="schoolList.map(option => option.store_name)" :value="schoolList_id" @change="bindDateChange">
								<view v-if="!schoolList">请选择</view>
								<view v-else>{{schoolList[schoolList_id].store_name}}</view>
							</picker>
						</view>
					</view>
					<uni-icons type="bottom" size="30rpx"></uni-icons>
				</view>
			</view>
			<view class="agreementBox">
				<radio-group v-model="agreeWith" @click="bindAgreeWith">
					<label class="radio">
						<radio value="" :checked="agreeWith" /><text class="agreementBox-radio">同意</text>
					</label>
				</radio-group>
				<text class="agreement" @click="JumpAgreement">《入驻协议》</text>
			</view>
			<view class="buttonBox">
				<!-- <button @click="ApplyForEntry">申请入驻</button> -->
				<button v-on:click="ApplyForEntry">申请入驻</button>
			</view>
		</template>
		<template v-else>
			<view class="main">
				<view class="mian-item">
					<view class="notes">
						姓名
					</view>
					<view class="inputBox">
						<view class="">
							{{arr.realname}}
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						电子邮箱
					</view>
					<view class="inputBox">
						<view class="">
							{{arr.email}}
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						手机号
					</view>
					<view class="inputBox">
						<view class="">
							{{arr.mobile}}
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						身份证
					</view>
					<view class="inputBox">
						<view class="">
							{{arr.id_card_num}}
						</view>
					</view>
				</view>
				<view class="mian-item">
					<view class="notes">
						配送区域
					</view>
					<view class="inputBox">
						<view class="" v-for="item in schoolList">
							<view v-if="item.store_id==arr.store_id">
								{{item.store_name}}
							</view>
						</view>
					</view>
					<uni-icons type="bottom" size="30rpx"></uni-icons>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import city from '../../../public/city.js'
	const $api = require('@/utils/request.js').API
	export default {
		data(){
			return {
				name: '',	// 姓名
				mailbox:'',	// 电子邮箱
				phone:'',	// 手机号
				code:'',	// 验证码
				codeKey: '',
				IDCard:'',	// 身份证
				schoolList: [],
				schoolList_id: 0,
				select: city,
				activeCity: '',	// 配送区域
				Seconds: '60',	// 获取验证码的秒数
				agreeWith: false, // 同意入驻协议
				obtainCodes: 60,
				isObtainCode: false,
				regular: {
					name: '',
					mailbox: '',
					phone: '',
					IDCard: '',
				},
				
				arr: [],
				is_deliveryman: 0,
			}
		},
		onLoad(options) {
			this.is_deliveryman = options.is_deliveryman
		},
		onShow() {
			this.selectSchool()
			this.shipperInformation()
		},
		methods: {
			// 申请入驻
			ApplyForEntry(){
				if (this.agreeWith == true) {
					if (!this.name || !this.mailbox || !this.phone || !this.code || !this.IDCard) {
						uni.showToast({
							title: '输入框里面不能为空',
							icon: 'none',
							duration: 1000
						})
					} else {
						$api.postDeliveryPersonnelApplyForEntry({
							realname: this.name,
							mobile: this.phone,
							email: this.mailbox,
							id_card_num: this.IDCard,
							store_id: Number(this.schoolList[this.schoolList_id].store_id),
							code: this.code,
							key: this.codeKey,
						}).then(res => {
							if(res.data.code != 0) {
								uni.showToast({
									// title:res.data.error_code,
									title:res.data.message,
									icon:'none',
									duration:2000
								})
							} else {
								uni.showToast({
									title:res.data.message,
									icon:'none',
									duration:2000
								})
								setTimeout(() => {
									uni.navigateTo({
										url:'./InTheProcessOfEntryReview'
									})
								})
							}
						})
						// uni.setStorage({
						// 	key: 'RidersStationed',
						// 	data: obj,
						// 	success: function() {
						// 		uni.navigateTo({
						// 			// 成功
						// 			// url:'../../my/ResidencyServices/SuccessfulEntryReview'
						// 			// 失败
						// 			// url:'../../my/ResidencyServices/EntryReviewFailed'
						// 			// 审核中
						// 			url:'../../my/ResidencyServices/InTheProcessOfEntryReview'
						// 		})
						// 	}
						// })
					}
				} else if (this.agreeWith == false) {
					uni.showToast({
						title: '请勾选入驻协议',
						icon: 'none',
						duration: 1000
					})
				}
				// uni.navigateTo({
				// 	// 成功
				// 	// url:'../../my/ResidencyServices/SuccessfulEntryReview'
				// 	// 失败
				// 	// url:'../../my/ResidencyServices/EntryReviewFailed'
				// 	// 审核中
				// 	url:'../../my/ResidencyServices/InTheProcessOfEntryReview'
				// })
			},
			shipperInformation(){
				$api.postShipperInformation({}).then(res => {
					this.arr = res.data.data
				})
			},
			eventObtainCode(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if(reg.exec(this.phone)){
					if(this.agreeWith == true) {
						this.packSetInterval()
						this.riderCode()
					} else {
						uni.showToast({
							title:'请勾选用户协议',
							icon:'none',
							duration:2000
						})
					}
				} else {
					uni.showToast({
						title:'请输入正确格式的手机号',
						icon:'none',
						duration:2000
					})
				}
			},
			packSetInterval() {
				this.isObtainCode = true
				let countdown = setInterval(() => {
					this.obtainCodes--;
					// this.obtainCode = `重新获取${this.obtainCode}S`
					if(this.obtainCodes <= 0) {
						clearInterval(countdown)
						this.obtainCode = 60
						this.isObtainCode = false
					}
				},1000)
			},
			riderCode(){
				$api.postRiderCode({
					// token: uni.getStorageSync('token'),
					mobile: this.phone,
				}).then(res => {
					this.codeKey = res.data.data.key
				})
			},
			selectSchool(){
				$api.postSelectSchool({}).then(res => {
					if (res.data.code == 0) {
						this.schoolList = res.data.data.list
					}
				})
			},
			
			// 同意协议
			bindAgreeWith() {
				this.agreeWith = !this.agreeWith
			},
			JumpAgreement(){
				uni.navigateTo({
					url:'./agreement'
				})
			},
			// 地址
			bindDateChange(e){
				// this.activeCity = e.detail.value
				this.schoolList_id = e.detail.value
			},
			// 正则验证
			getname(){
				let reg = /^[\u4e00-\u9fa5]{2,8}$/
				if (reg.exec(this.name)) {
				  this.regular.name = 'checkmarkempty';
				} else {
				  this.regular.name = 'closeempty';
				}
			},
			getmailbox(){
				let reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
				if (reg.exec(this.mailbox)) {
				  this.regular.mailbox = 'checkmarkempty';
				} else {
				  this.regular.mailbox = 'closeempty';
				}
			},
			getphone(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
				  this.regular.phone = 'checkmarkempty';
				} else {
				  this.regular.phone = 'closeempty';
				}
			},
			getIDCard(){
				let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
				if (reg.exec(this.IDCard)) {
				  this.regular.IDCard = 'checkmarkempty';
				} else {
				  this.regular.IDCard = 'closeempty';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	// input::placeholder {
	//   font-size: 20px;
	// }
	.regularAnswer {
		color: #19be6b;
	}
	.regularWrong {
		color: #fa3534;
	}
	.RiderServices {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 300;
		// color: #666666;
		background-color: #F3F3F3;
		.main {
			background: white;
			// box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(10, 13, 47, 0.05);
			border-radius: 10rpx;
			// 每一条数据
			.mian-item {
				display: flex;
				// justify-content: space-between;
				margin: 0 44rpx 0 41rpx;
				padding: 30rpx 0;
				border-bottom: 1px solid #F3F3F3;

				// 前面的格式
				.notes {
					width: 190rpx;
				}

				// 后面的input框
				.inputBox {
					position: relative;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #999999;
					line-height: 30rpx;
					button::after {
						border: none;
					}
					input {
						width: 480rpx;
					}
					.inputBox-icon {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
					.code {
						position: absolute;
						top: 10rpx;
						right: 0;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						line-height: 30rpx;
					}
					.obtainCodes {
						position: absolute;
						top: 10rpx;
						right: 0;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						background: #FFFFFF;
						line-height: 30rpx;
						z-index: 999;
					}
				}
			}

			.main-item:last-child {
				border-bottom: 0;
			}
		}
		.agreementBox {
			display: flex;
			margin: 37rpx 0 0 27rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5D5D5D;
			.agreementBox-radio {
				padding-left: 18rpx;
			}
			.agreement {
				color: #F14500;
				padding-left: 5rpx;
			}
		}
		.buttonBox {
			position: absolute;
			width: 630rpx;
			height: 88rpx;
			left: 60rpx;
			bottom: 50rpx;
			margin: auto;
			button {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
			}
		}
	}
</style>